{% extends "manage/stats_base.html" %}

{% block css %}
 <style type="text/css">
    .red {
      fill:red;
    }
</style>
{% endblock %}

{% block sub_content %}
<h4 id="help-info">
    点击<span class="glyphicon glyphicon-time"></span>跳转到上课时间轴，点击<span class="glyphicon glyphicon-signal"></span>显示上课次数统计表格。当前显示
    <a href="#">无</a> <small></small>
    <a type="button" class="btn btn-default" href="javascript:;" onclick="location.href='{{ url_for('manage.export_statistics_schools_excel') }}'">导出Excel</a>
</h4>
<div class="row">
    <div class="col-md-10 col-md-offset-1" id="graph"></div>
</div>

<div class="row" style="margin-top:5px;">
    <div class="col-sm-12 table-responsive">
        <table class="table table-condensed table-bordered table-striped" data-toggle="table">
            <thead>
                <tr>
                    <th data-sortable="true">机构序号</th>
                    <th>机构名称</th>
                    <th data-sortable="true">地区</th>
                    <th data-sortable="true">最近上课</th>
                    <th data-sortable="true">学生数量</th>
                    <th data-sortable="true">绑定微信数量</th>
                    <th data-sortable="true">结课次数</th>
                    <th data-sortable="true">上课次数</th>
                    <th data-sortable="true">结课占比(%)</th>
                    <th>查看</th>
                </tr>
            </thead>
            <tbody>
                {% for row in table_rows %}
                <tr id="{{ row.school_id }}">
                    <td>{{ loop.index }}</td>
                    <td><a target="_blank" href="{{ url_for('manage.edit_school', sid=row.school_id) }}">{{ row.school.name }}</a></td>
                    <td>{{ row.school.area.fullname }}</td>
                    <td>{{ row.recent }} {{ row.weekday }}</td>
                    <td>{{ row.stu_num }}</td>
                    <td>{{ row.bind_num }}</td>
                    <td>{{ row.session_end }}</td>
                    <td>{{ row.session_total }}</td>
                    <td>{{ row.session_percent }}</td>
                    <td>
                        <a href="{{ url_for('manage.session_list', school_id=row.school_id) }}"><span class="glyphicon glyphicon-time" title="查看时间轴"></span></a>
                        <a class="show-graph" href="#"><span class="glyphicon glyphicon-signal" title="统计上课次数"></span></a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
function showSchoolName(schoolId){
    var schoolName = $("tbody tr#"+ schoolId +" td:nth-child(2)").html();
    $("#help-info a").html(schoolName);
}


function showGraph(schoolId){
    var names = ['上课次数', '结课次数'];
    var groups = new vis.DataSet();
    groups.add({
        id: 0,
        content: names[0],
        options: {
            yAxisOrientation: 'left'
            // interpolation: {
            //     parametrization: 'uniform'
            // }
        }});
    groups.add({
        id: 1,
        content: names[1],
        options: {
            yAxisOrientation: 'left'
            // interpolation: {
            //     parametrization: 'uniform'
            // }
        }});

    var container = document.getElementById('graph');
    var dataset = new vis.DataSet();

    // get the chart data from server
    var url = "/manage/statistics/school_class_number/" + schoolId;
    $.get(url, function(data){
        var totalData = [];
        var finishData = [];
        data['data'].forEach(function(value, index, array){
            // function getLabel(value, type){
            //     var labelContent = '';
            //     if (type == 'finish'){
            //         labelContent = "(" + value.weekday + "," + value.finish + "," + value.finish_current + ")";
            //     } else if (type == 'total'){
            //         labelContent = "(" + value.weekday + "," + value.total + "," + value.total_current + ")";
            //     }
            //     var label = {
            //         content : labelContent,
            //         className: 'red',
            //         xOffset: 5,
            //         yOffset: 5
            //     };  
            //     return label              
            // }

            totalData.push({x: value.date, y: value.total, group: 0});
            finishData.push({x: value.date, y: value.finish, group: 1});
        });
        dataset.add(totalData);
        dataset.add(finishData);

        var options = {
            dataAxis: {
                visible: true, 
                showMinorLabels: true,
                left: {
                    title: {
                        text: '每日上课次数统计（每天4:00 am更新数据）'
                    }
                }
            },
            legend: true,
            start: data.from,
            end: data.to,
            clickToUse: true,
            drawPoints: { style: 'circle', size: 6},
            format: {
              majorLabels: {
                millisecond:'HH:mm:ss',
                second:     'MM/D HH:mm',
                minute:     'MM/D',
                hour:       'MM/D',
                weekday:    'MM YYYY',
                day:        'YYYY/MM/ddd',
                month:      'YYYY',
                year:       ''
              }
            }
        };
        $(container).html('');

        // show school name
        showSchoolName(schoolId);
        // show graph
        var graph2d = new vis.Graph2d(container, dataset, groups, options);
    }, 'json');

}

$(function(){
    // Warning: you must bind the click event to table rather than .show-graph
    $('.table-responsive').on('click', '.show-graph', function(){
        var schoolId = $(this).parent().parent().attr('id');
        showGraph(schoolId);
        showSchoolName(schoolId);
    });

});
</script>
{% endblock %}
